<template>
  <div>
    <div class="fenleituijian cards cards-borderless" v-for="(type,tindex) in types" :key="tindex">
      <h1 style="text-align: left;">{{type.tname}}</h1>
      <div class="col-md-4 col-sm-6 col-lg-3"  v-for="(video,index) in videos" :key="index" v-show="video.tid==tindex">
          <router-link class="card" :to="{name:'VideoDatail',params:{vid:video.vid}}">
          <img :src="video.vimg" width="400px" height="200px" >
          <div class="caption">已经有2022位小伙伴为其点赞</div>
          <div class="card-heading"><strong>{{video.vname}}</strong></div>
          <div class="card-content text-muted">{{video.vintroduce}}</div>
          </router-link>
      </div>
  </div>
  
  </div>

</template>

<script>
  export default {
    name: 'videoTj',
    data() {
      return {
        videos: [
          {"tid": 0, "vid": 1, "vname": "猎罪图鉴", "vimg": "https://tse1-mm.cn.bing.net/th/id/R-C.6042575fb3fa7c52ebdb4549d086d79d?rik=hZm3UUQpS6e2vQ&riu=http%3a%2f%2fimg.jutoula.com%2f202107%2f02%2f170759507.jpg&ehk=OMfSY20Tnr%2b23dSAOCiIr7gIxgP6bjGjQOWnMY%2fX6Go%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"},
          {"tid": 1, "vid": 2, "vname": "还珠格格", "vimg": "https://tse1-mm.cn.bing.net/th/id/R-C.6cc20ca9dad13e374436566fefd1a927?rik=8Wc0SJ8H%2fGEzkQ&riu=http%3a%2f%2fi0.hdslb.com%2fbfs%2farchive%2f76ce572806aacb209fa62d414e65ef7a5834a6ec.jpg&ehk=POkFSLhPW%2f4wLgJ6b0a6bwknDWwJo642RFIwUqx1umw%3d&risl=&pid=ImgRaw&r=0"}
        ],
        types: [{"tname": "动作"}, {"tname":"悬疑"}],
      }
    },
    
    components: {},
    mounted() {
      
      // this.$axios.get('typeList.do').then(response => {
      //   console.log(response)
      //   this.types = response.data
      //   console.log(this.types);
      // }).catch(function (error) {
      //   console.log(error);
      // })

      // this.$axios.get('videoList.do').then(response => {
      //   this.videos = response.data
      //   console.log(this.videos);
      // }).catch(function (error) {
      //   console.log(error);
      // })

    }
  }
</script>

<style>
  .fenleituijian {
    width: 90%;
    margin: 30px auto;
   border-bottom: 1px solid #000;
  }
    .fenleituijian img{
    width: 400px;
    height: 210px;
  }
  body{
    background-color: rgb(246, 244, 213);
    }
</style>